<template>
  <view class="detail-page">
    <view class="detail-header">
      <view class="header-box">
        <template v-if="courseInfo?.img && (!chooseItem || !tabIndex)">
          <image class="header-img" mode="aspectFill" :src="`https://shuyutk.oss-cn-qingdao.aliyuncs.com${courseInfo.img}`" />
        </template>
        <template v-else>
          <template v-if="isVideo">
            <video
              id="microClassroomVideo"
              class="header-img"
              :src="`https://shuyutk.oss-cn-qingdao.aliyuncs.com${chooseItem?.fileUrl}`"
              :autoplay="true"
              controls
              :enable-progress-gesture="false"
              :show-progress="true"
              :show-fullscreen-btn="true"
              :show-play-btn="true"
              :show-center-play-btn="true"
              object-fit="contain"
              :poster="courseInfo?.img ? `https://shuyutk.oss-cn-qingdao.aliyuncs.com${courseInfo.img}` : ''"
              preload="auto"
              play-btn-position="center"
              :enable-play-gesture="true"
              :vslide-gesture="true"
              :vslide-gesture-in-fullscreen="true"
              @timeupdate="timeupdate"
              @error="onVideoError"
              @waiting="onVideoWaiting"
              @canplay="onVideoCanplay"
              @seeking="onVideoSeeking"
              @seeked="onVideoSeeked"
              @loadstart="onVideoLoadStart"
              @progress="onVideoProgress"
            />
          </template>
          <template v-else>
            <image v-if="courseInfo?.img" class="header-img" mode="aspectFill" :src="`https://shuyutk.oss-cn-qingdao.aliyuncs.com${courseInfo?.img}`" />
            <view class="glass-effect" />
            <view class="header-process">
              <view class="active" :style="{ width: `${(audioCurrentTime / audioDuration) * 618}rpx` }" />
            </view>
            <view class="header-control">
              <text class="header-text">
                {{ formatDuration(audioCurrentTime) }}
              </text>
              <view class="header-btn" @click="handlePlay()">
                <image class="btn-img" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/${isPlay ? 'pause' : 'play'}_icon.png`" />
              </view>
              <text class="header-text">
                {{ formatDuration(audioDuration) }}
              </text>
            </view>
          </template>
        </template>
      </view>
      <view class="detail-info">
        <view class="info-left">
          <text class="info-name">
            {{ tabIndex && chooseItem ? chooseItem?.title : courseInfo?.title }}
          </text>
          <view class="info-content">
            <image v-if="vipFlag === '1'" class="info-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250611/icon_vip_2.png" />
            <text v-if="tabIndex && chooseItem" class="info-type" :class="`info-type-${isVideo ? '0' : '1'}`">
              {{ !isVideo ? '音频' : '视频' }}
            </text>
            <text v-else class="info-num">
              {{ detailList.length }}节
            </text>
          </view>
        </view>
        <view class="info-right">
          <view class="info-item" @click="handleCollect">
            <image v-if="!isCollect" class="item-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/icon_collect.png" />
            <image v-else class="item-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/icon_collect_select.png" />
            <text class="item-text">
              收藏
            </text>
          </view>
          <button v-if="loginFlag" open-type="share" hover-class="none" class="info-item">
            <image class="item-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/icon_share.png" />
            <text class="item-text">
              分享
            </text>
          </button>
          <view v-else class="info-item" @click="handleShare">
            <image class="item-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/icon_share.png" />
            <text class="item-text">
              分享
            </text>
          </view>
          <view v-if="isShare" class="info-toast">
            首次分享可得
            <text style="font-weight: bold;">
              5
            </text>
            星币
          </view>
        </view>
      </view>
    </view>

    <view class="detail-content">
      <view class="detail-tab">
        <!-- <view class="tab-item" :class="{ active: tabIndex === 0 }" @click="handleChangeTab(0)">
          详情
        </view> -->
        <view class="tab-item" :class="{ active: tabIndex === 1 }" @click="handleChangeTab(1)">
          目录
        </view>
      </view>

      <!-- <view v-if="tabIndex === 0" class="tab-content">
        <mp-html :content="courseInfo.content" container-style="margin-bottom: 40rpx" />
      </view> -->

      <scroll-view scroll-y="auto" class="tab-list" @scrolltolower="scrolltolower">
        <view v-for="(item) in detailList" :key="item.detailId" class="micro-classroom-item" @click="handleChoose(item)">
          <image v-if="chooseItem?.detailId === item.detailId" class="item-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/icon_play.png" />
          <text v-else class="item-num">
            {{ item.sortOrder }}
          </text>
          <view class="item-content">
            <text class="item-name" :class="chooseItem?.detailId === item.detailId && 'item-name-play'">
              {{ item.title }}
            </text>
            <view class="item-progress">
              <text v-if="chooseItem?.detailId === item.detailId" class="progress-play">
                正在播放
              </text>
              <!-- <text class="progress-text">
                {{ chooseItem?.detailId === item.detailId ? `已学${isVideo ? videoProcess : audioProcess}%` : item.progress ? `已学${item.progress}%` : '未学习' }}
              </text> -->
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
  <IpOverlay v-model:show="showSuccess" title="分享成功" :number="shareNum" info="" />
  <LoginOverlay v-model:show="showLogin" />
</template>

<script lang="ts" setup>
import { addCollection, delCollection, getCollectionStatus, shareCourse } from '@/api/collection';
import type { AddCollectionParams, GetCollectionStatusParams, GetCollectionStatusResult } from '@/api/collection/type';
import { getCourseInfo, getMicroclassDetail } from '@/api/microClassroom';
import type { GetMicroclassDetailParams, GetMicroclassDetailResult } from '@/api/microClassroom/type';
import { formatDuration } from '@/utils/common/index';
import { useUserStore } from '@/store';
import { Toast } from '@/utils';
import { isLogin } from '@/utils/auth';

const loginFlag = ref<boolean>(isLogin());
const userStore = useUserStore();
const tabIndex = ref<number>(1);
const vipFlag = ref<string>('0');

let videoContext: any;
onReady(() => {
  videoContext = uni.createVideoContext('microClassroomVideo');
});

const pageParams = ref<GetMicroclassDetailParams>({
  courseId: '',
  pageNum: 1,
  pageSize: 10,
});
const courseInfo = ref<any>({});
const detailList = ref<Array<GetMicroclassDetailResult>>([]);
const total = ref<number>(0);
const chooseItem = ref<GetMicroclassDetailResult>();

const isVideo = computed(() => {
  if (!chooseItem.value)
    return false;
  return chooseItem.value?.fileUrl.indexOf('mp4') > -1;
});

const getInfo = () => {
  return getCourseInfo({ courseId: pageParams.value.courseId }).then((res: any) => {
    courseInfo.value = res;
  });
};

const isCollect = ref<boolean>(false); // 是否收藏
const collectionId = ref<string>('');
const isShare = ref<boolean>(false); // 是否分享
const getCollectStatus = () => {
  if (!loginFlag.value)
    return;
  const params: GetCollectionStatusParams = {
    type: tabIndex.value && chooseItem.value ? '1' : '2',
    courseId: pageParams.value.courseId,
    courseDetailId: tabIndex.value && chooseItem.value ? chooseItem.value!.detailId : undefined,
  };
  getCollectionStatus(params).then((res: GetCollectionStatusResult) => {
    isCollect.value = Number(res.status) === 1;
    if (isCollect.value) {
      collectionId.value = res.collectionId;
    }
  });
  getCollectionStatus({ ...params, type: tabIndex.value ? '3' : '4' }).then((res: GetCollectionStatusResult) => {
    isShare.value = Number(res.status) === 0;
    if (isShare.value) {
      setTimeout(() => {
        isShare.value = false;
      }, 2000);
    }
  });
};

// 收藏
let collectionLoading: boolean = false;
const showLogin = ref<boolean>(false); // 登录
const handleCollect = () => {
  if (!loginFlag.value) {
    showLogin.value = true;
    return;
  }

  if (collectionLoading)
    return;

  if (!isCollect.value) {
    const params: AddCollectionParams = {
      type: tabIndex.value && chooseItem.value ? '1' : '2',
      courseId: pageParams.value.courseId,
      courseDetailId: tabIndex.value && chooseItem.value ? chooseItem.value!.detailId : undefined,
      courseDetailTitle: tabIndex.value && chooseItem.value ? chooseItem.value!.title : courseInfo.value.title,
      coverPic: courseInfo.value.img,
    };
    collectionLoading = true;
    addCollection(params).then((res: any) => {
      isCollect.value = true;
      collectionId.value = res.collectionId;
      Toast('已收藏');
    }).finally(() => {
      collectionLoading = false;
    });
  }
  else {
    collectionLoading = true;
    delCollection({ collectionId: collectionId.value }).then(() => {
      isCollect.value = false;
      Toast('已取消');
    }).finally(() => {
      collectionLoading = false;
    });
  }
};

// 音频
const isPlay = ref<boolean>(false);
const audioCurrentTime = ref<number>(0);
const audioDuration = ref<number>(0);
const audioProcess = ref<number>(0);
let audioContext: any;
const handlePlay = (url?: string) => {
  if (url) {
    audioContext?.destroy();
    audioCurrentTime.value = 0;
    audioDuration.value = 0;
    audioProcess.value = 0;
    isPlay.value = false;

    audioContext = uni.createInnerAudioContext();
    audioContext.src = `https://shuyutk.oss-cn-qingdao.aliyuncs.com${url}`;
    audioContext.onPlay(() => {
      isPlay.value = true;
    });
    audioContext.onPause(() => {
      isPlay.value = false;
    });
    audioContext.onEnded(() => { //  播放结束
      isPlay.value = false;
    });
    // 音频时间更新 - 激进优化版本
    let audioTimeUpdateTimer: number | null = null;
    let audioUpdateCount = 0;
    audioContext.onTimeUpdate(() => {
      if (audioTimeUpdateTimer)
        return;

      // 大幅减少音频更新频率
      audioUpdateCount++;
      if (audioUpdateCount % 4 !== 0) { // 每4次才更新一次
        return;
      }

      audioTimeUpdateTimer = setTimeout(() => {
        const newCurrentTime = Math.round(audioContext.currentTime);
        const newDuration = Math.round(audioContext.duration);
        const newProcess = Math.round((newCurrentTime / newDuration) * 100);

        // 只有当值有明显变化时才更新（减少1秒以内的频繁更新）
        if (Math.abs(audioCurrentTime.value - newCurrentTime) >= 1) {
          audioCurrentTime.value = newCurrentTime;
        }
        if (Math.abs(audioDuration.value - newDuration) >= 1) {
          audioDuration.value = newDuration;
        }
        if (Math.abs(audioProcess.value - newProcess) >= 2) { // 进度变化2%才更新
          audioProcess.value = newProcess;
        }

        audioTimeUpdateTimer = null;
      }, 500); // 音频更新延迟500ms
    });
  }
  if (!tabIndex.value)
    return;
  if (isPlay.value) {
    audioContext?.pause();
  }
  else {
    audioContext?.play();
  }
};

// 视频相关状态
const videoKey = ref(0); // 用于强制重新渲染video组件
const videoSrc = ref(''); // 视频源地址
const isVideoLoading = ref(false); // 视频加载状态
const videoLoadCount = ref(0); // 视频加载次数，用于检测重复请求
const isUserSeeking = ref(false); // 用户是否正在拖拽进度条

let lastCurrentTime = 0;
let updateCount = 0;

// 更新视频源
const updateVideoSource = () => {
  if (!chooseItem.value)
    return;

  // 重置相关状态
  videoLoadCount.value = 0;

  // 更新视频key和源地址
  videoKey.value = Date.now();
  videoSrc.value = `https://shuyutk.oss-cn-qingdao.aliyuncs.com${chooseItem.value.fileUrl}`;

  console.log('更新视频源:', videoSrc.value);
};

const handleChoose = (item: GetMicroclassDetailResult) => {
  if (item.detailId === chooseItem.value?.detailId)
    return;
  chooseItem.value = item;
  getCollectStatus();

  // 更新视频源
  if (isVideo.value) {
    updateVideoSource();
  }
  else {
    handlePlay(item.fileUrl);
  }
};

const handleChangeTab = (index: number) => {
  tabIndex.value = index;
  getCollectStatus();
};

const getDetailList = () => {
  return getMicroclassDetail(pageParams.value).then((res: { total: number; rows: Array<GetMicroclassDetailResult> }) => {
    detailList.value = detailList.value.concat(res.rows);
    total.value = res.total;
    if (chooseItem.value)
      return;
    chooseItem.value = detailList.value[0];

    // 初始化视频或音频
    if (isVideo.value) {
      updateVideoSource();
    }
    else {
      handlePlay(chooseItem.value!.fileUrl);
    }
  });
};
const scrolltolower = () => {
  if (total.value <= detailList.value.length)
    return;
  pageParams.value.pageNum++;
  getDetailList();
};

const currentTime = ref(0);
const videoProcess = ref(0);

// 简化的节流函数
let timeUpdateTimer: number | null = null;

// 检测是否为时间跳跃（用户拖拽进度条）
const isTimeJump = (newTime: number, oldTime: number) => {
  const timeDiff = Math.abs(newTime - oldTime);
  return timeDiff > 2; // 时间差超过2秒认为是拖拽
};

// 强制重新加载视频组件
const forceReloadVideo = () => {
  if (!chooseItem.value)
    return;

  console.log('强制重新加载视频组件');

  // 获取当前播放时间
  let currentPlayTime = 0;
  if (videoContext) {
    try {
      currentPlayTime = videoContext.currentTime || 0;
      videoContext.stop();
    }
    catch (error) {
      console.error('获取播放时间失败:', error);
    }
  }

  // 重置状态
  videoLoadCount.value = 0;
  isVideoLoading.value = false;

  // 更新视频key强制重新渲染
  videoKey.value = Date.now();

  // 重新设置视频源（添加时间戳防止缓存）
  const timestamp = Date.now();
  videoSrc.value = `https://shuyutk.oss-cn-qingdao.aliyuncs.com${chooseItem.value.fileUrl}?t=${timestamp}`;

  // 延迟恢复播放位置
  if (currentPlayTime > 0) {
    setTimeout(() => {
      if (videoContext) {
        try {
          videoContext.seek(currentPlayTime);
          videoContext.play();
        }
        catch (error) {
          console.error('恢复播放位置失败:', error);
        }
      }
    }, 1000);
  }
};

// 播放进度 - 优化版本，解决模拟器和真机问题
const timeupdate = (e: any) => {
  const newCurrentTime = Math.round(e.detail.currentTime);
  const newVideoProcess = Math.round((e.detail.currentTime / e.detail.duration) * 100);

  // 如果用户正在拖拽，暂停更新避免冲突（解决真机画面卡住问题）
  if (isUserSeeking.value) {
    return;
  }

  // 节流处理，减少更新频率（解决模拟器重复请求问题）
  if (timeUpdateTimer)
    return;

  // 检测时间跳跃（可能是拖拽或网络问题）
  const isJump = isTimeJump(newCurrentTime, lastCurrentTime);

  // 设置更新延迟：跳跃时延迟更长，正常播放时延迟较短
  const delay = isJump ? 800 : 500; // 增加延迟，减少频繁更新

  timeUpdateTimer = setTimeout(() => {
    // 大幅减少更新频率：每4次更新一次（解决模拟器缓冲问题）
    updateCount++;
    if (updateCount % 4 === 0) {
      // 只有当值有明显变化时才更新
      if (Math.abs(currentTime.value - newCurrentTime) >= 1) {
        currentTime.value = newCurrentTime;
      }
      if (Math.abs(videoProcess.value - newVideoProcess) >= 3) { // 进度变化3%才更新
        videoProcess.value = newVideoProcess;
      }
    }

    lastCurrentTime = newCurrentTime;
    timeUpdateTimer = null;
  }, delay);
};

// 视频加载开始
const onVideoLoadStart = () => {
  console.log('视频开始加载...');
  videoLoadCount.value++;
  isVideoLoading.value = true;

  // 检测重复请求
  if (videoLoadCount.value > 3) {
    console.warn('检测到视频重复加载，可能存在问题');
    // 重置视频组件
    forceReloadVideo();
  }
};

// 视频错误处理
const onVideoError = (e: any) => {
  console.error('视频播放错误:', e);
  isVideoLoading.value = false;

  // 尝试重新加载视频
  setTimeout(() => {
    forceReloadVideo();
  }, 1000);
};

// 视频缓冲等待
const onVideoWaiting = () => {
  console.log('视频缓冲中...');
  isVideoLoading.value = true;
};

// 视频可以播放
const onVideoCanplay = () => {
  console.log('视频可以播放');
  isVideoLoading.value = false;
};

// 视频拖拽开始 - 针对真机画面卡住问题
const onVideoSeeking = () => {
  console.log('视频拖拽开始');
  // 暂停timeupdate更新，避免冲突
  isUserSeeking.value = true;

  // 针对真机问题：强制刷新视频渲染
  if (videoContext) {
    try {
      // 获取当前seek的时间
      const seekTime = videoContext.currentTime;
      console.log('拖拽到时间点:', seekTime);
    }
    catch (error) {
      console.error('获取拖拽时间失败:', error);
    }
  }
};

// 视频拖拽结束 - 针对真机画面卡住问题
const onVideoSeeked = () => {
  console.log('视频拖拽结束');

  // 延迟恢复timeupdate更新
  setTimeout(() => {
    isUserSeeking.value = false;

    // 针对真机画面卡住问题：强制刷新视频帧
    if (videoContext) {
      try {
        // 微调播放位置来刷新画面
        const currentTime = videoContext.currentTime;
        videoContext.seek(currentTime + 0.01);
        setTimeout(() => {
          videoContext.seek(currentTime);
        }, 50);
      }
      catch (error) {
        console.error('刷新视频帧失败:', error);
      }
    }
  }, 200);
};

// 视频加载进度
const onVideoProgress = () => {
  // 减少日志输出，避免模拟器中过多的网络请求日志
  // console.log('视频加载进度更新');
};

onLoad((option: any) => {
  pageParams.value.courseId = option.id;
  vipFlag.value = option.vipFlag;
  tabIndex.value = option.type || 1;
  getInfo().then(() => {
    getCollectStatus();
  });
  getDetailList();
});

onUnload(() => {
  // 清理音频和视频资源
  audioContext?.destroy();
  videoContext?.pause();

  // 清理定时器
  if (timeUpdateTimer) {
    clearTimeout(timeUpdateTimer);
    timeUpdateTimer = null;
  }
});

const showSuccess = ref<boolean>(false);
const shareNum = ref<string>('5');
const doShare = () => {
  const params: GetCollectionStatusParams = {
    type: tabIndex.value && chooseItem.value ? '3' : '4',
    courseId: pageParams.value.courseId,
    courseDetailId: tabIndex.value && chooseItem.value ? chooseItem.value!.detailId : undefined,
  };
  shareCourse(params).then((res: any) => {
    if (Number(res.integral)) {
      showSuccess.value = true;
      shareNum.value = res.integral;
    }
  });
};
const handleShare = () => {
  showLogin.value = true;
};
// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  doShare();
  return {
    title: userStore.share_txt,
    imageUrl: userStore.share_pic_url,
  };
});
</script>

<style lang="scss" scoped>
.detail-page {
  height: 100%;
  display: flex;
  flex-direction: column;

  .detail-header {
    display: flex;
    flex-direction: column;
    background: #fff;

    .header-box {
      position: relative;
      width: 750rpx;
      height: 422rpx;
      padding-top: 190rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .header-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 750rpx;
        height: 422rpx;
      }

      .header-icon {
        position: absolute;
        top: 160rpx;
        right: 20rpx;
        width: 64rpx;
        height: 64rpx;
      }

      .glass-effect {
        position: absolute;
        top: 0;
        left: 0;
        width: 750rpx;
        height: 422rpx;
        background-color: rgba(0, 0, 0, 0.3); /* 半透明背景 */
        backdrop-filter: blur(5rpx); /* 模糊背景 */
        -webkit-backdrop-filter: blur(5rpx); /* Safari 兼容 */
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 阴影效果 */
      }

      .header-process {
        position: relative;
        width: 618rpx;
        height: 10rpx;
        background: #fff;
        border-radius: 5rpx;
        display: flex;

        .active {
          height: 10rpx;
          border-radius: 5rpx;
          background: #2B9BF6;
        }
      }

      .header-control {
        position: relative;
        width: 538rpx;
        padding-top: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .header-text {
          width: 100rpx;
          font-size: 24rpx;
          color: #2B9BF6;
        }

        .header-btn {
          width: 104rpx;
          height: 104rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fff;

          .btn-img {
            width: 36rpx;
            height: 40rpx;
          }
        }
      }
    }

    .detail-info {
      padding: 24rpx 40rpx;
      display: flex;
      justify-content: space-between;

      .info-left {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        .info-name {
          font-size: 36rpx;
          color: #251504;
          line-height: 54rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .info-content {
          padding-top: 8rpx;
          display: flex;
          align-items: center;

          .info-icon {
            width: 68rpx;
            height: 36rpx;
            margin-right: 14rpx;
          }

          .info-type {
            padding: 0 16rpx;
            font-size: 20rpx;
            line-height: 34rpx;
          }

          .info-type-0 {
            background: #FFEED1;
            color: #FF9532
          }

          .info-type-1 {
            background: #D4E0FC;
            color: #4977C0
          }

          .info-num {
            font-size: 24rpx;
            color: #87837B;
            line-height: 36rpx;
          }
        }
      }

      .info-right {
        position: relative;
        display: flex;
        align-items: center;

        .info-item {
          padding-left: 40rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .item-icon {
            width: 48rpx;
            height: 48rpx;
          }

          .item-text {
            padding-top: 8rpx;
            font-size: 28rpx;
            color: #87837B;
            line-height: 42rpx;
          }
        }

        .info-toast {
          position: absolute;
          right: -24rpx;
          bottom: -102rpx;

          width: 310rpx;
          padding: 0 24rpx;
          background: #FFE3FF;
          border-radius: 24rpx;
          font-size: 28rpx;
          color: #FB0086;
          line-height: 74rpx;

          &::after {
            content: '';
            position: absolute;
            bottom: 65rpx;
            right: 2rpx;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 15rpx solid transparent;
            border-right: 30rpx solid transparent;
            border-bottom: 30rpx solid #FFE3FF;
          }
        }
      }
    }
  }

  .detail-content {
    flex: 1;
    overflow: hidden;
    padding: 24rpx 40rpx 0;
    margin-top: 24rpx;
    background: #fff;

    display: flex;
    flex-direction: column;

    .detail-tab {
      display: flex;
      margin-bottom: 40rpx;

      .tab-item {
        padding-bottom: 8rpx;
        font-size: 32rpx;
        color: #000000;
        line-height: 48rpx;
      }

      .tab-right {
        margin-left: 64rpx;
      }

      .active {
        font-weight: bold;
        color: #2B9BF6;
        border-bottom: 4rpx solid #2B9BF6;
      }
    }

    .tab-content {
      flex: 1;
      overflow: auto;

      .tab-text {
        width: 100%;
        margin-bottom: 40rpx;
      }
    }

    .tab-list {
      flex: 1;
      overflow: auto;

      .micro-classroom-item {
        height: 150rpx;
        padding: 28rpx 0;
        display: flex;
        align-items: center;
        border-bottom: 2rpx solid #EDEDED;

        .item-num {
          font-weight: bold;
          font-size: 44rpx;
          color: #B8B8D2;
        }

        .item-img {
          width: 48rpx;
          height: 48rpx;
        }

        .item-content {
          padding-left: 36rpx;
          display: flex;
          flex-direction: column;

          .item-name {
            font-weight: bold;
            font-size: 28rpx;
            color: #251504;
            line-height: 42rpx;
          }

          .item-name-play {
            color: #37CC67;
          }

          .item-progress {
            display: flex;
            align-items: center;
            padding-top: 12rpx;
            font-size: 24rpx;
            line-height: 36rpx;

            .progress-play {
              color: #37CC67;
              padding-right: 52rpx;
            }

            .progress-text {
              color: #87837B;
            }
          }
        }
      }

      .micro-classroom-item:first-child {
        border-top: 2rpx solid #EDEDED;
      }

      .micro-classroom-item:last-child {
        border-bottom: 2rpx solid #EDEDED;
        margin-bottom: 40rpx;
      }
    }
  }
}
</style>
